<template>
  <div class="question">
    <h4>{{ question.text }}</h4>
    <el-input v-model="userAnswer" placeholder="请输入答案"></el-input>
  </div>
</template>

<script>
export default {
  name: 'FillInBlankQuestionComponent',
  props: {
    question: {
      type: Object,
      required: true
    },
    answer: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      userAnswer: this.answer
    };
  },
  watch: {
    userAnswer(newVal) {
      this.$emit('update-answer', newVal);
    }
  }
};
</script>

<style scoped>
.question {
  margin-bottom: 20px;
  white-space: pre-wrap;
}
</style>